<template>
  <div>
    <table width='500px' border="1px" align='center'>
        <tr>
            <th>班级ID</th>
            <th>班级名称</th>
            <th>专业方向</th>
            <th>操作</th>
        </tr>
        <tr v-for="(i,index) in classes" :key="index">
            <td>{{i.id}}</td>
            <td>{{i.name}}</td>
            <td>{{i.kid}} <a @click="upd(i)" href="#">修改</a></td>
            <td><a @click="remove(i.id)" href="#">删除</a></td>
        </tr>
    </table>
    <el-pagination
  background
  layout="prev, pager, next"
  :total="total"
  :page-size="page_size"
  :current-change='change'
  >
</el-pagination>
  </div>
</template>

<script>
import axios from 'axios'
export default {
    data(){
        return{
            classes:[],
            total:1,
            page_size:1,
            page:1,
        }
    },
    methods:{
        // 获取数据
        GetClasses(){
            axios.get('http://127.0.0.1:5000/class?page='+this.page).then((res) => {
                this.classes = res.data.lst
                this.total = res.data.total
                this.page_size = res.data.page_size
                
            })
        },
        // 删除
        remove(id){
            axios.delete('http://127.0.0.1:5000/del/'+id).then((res) => {
                alert(res.data.msg)
                this.GetClasses()
            }).catch((err) => {
                
            });
        },
        //修改
        upd(i){
            this.$router.push({name:'upd',query:{'id':i}})
        },
        change(number){
            this.page = number
            this.GetClasses()
            alert(number)
        }
    },
    mounted(){
        this.GetClasses()
    }
}
</script>

<style>

</style>